<template>
    <v-layout type="map"><p class="page-title">评估推演</p>
      <!-- <div class="alike-search-header"> -->
      <div class="search-box">
        <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="请输入内容" @input="getData" />
        <a href="javascript:;" class="add el-icon-plus" @click="$router.push({ path: '/notebook/detail' })">新增</a>
      </div>
      <!-- </div> -->
      <div class="table-layout">
        <el-table :data="tableData" class="myself-table">
          <el-table-column prop="name" label="想定名称" />
          <el-table-column prop="var" label="变量" />
          <el-table-column prop="count" label="次数" />
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <!--<el-button type="text" @click="put(row)">修改</el-button>-->
              <el-button type="text">编辑</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="进度">
            <template slot-scope="{ row }">
              <div class="plan">
                <div :style="{ width: row.plan }" class="piston"></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="chart">
        <div class="chart-item">
          <chart :option="testData" />
        </div>
        <div class="chart-item">
          <chart :option="testData" />
        </div>
        <div class="chart-item">
          <chart :option="testData" />
        </div>
      </div>
    </v-layout>
  </template>
  
  <script>
  import chart from './module/chart'
  export default {
    data() {
      return {
        Pagedata: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        tableData: [
          {
            name: 'Urgent Safety',
            var: 'var',
            count: '10次',
            plan: '60%',
          },
          {
            name: 'Urgent Safety',
            var: 'var',
            count: '10次',
            plan: '60%',
          },
          {
            name: 'Urgent Safety',
            var: 'var',
            count: '10次',
            plan: '60%',
          },
          {
            name: 'Urgent Safety',
            var: 'var',
            count: '10次',
            plan: '60%',
          },
        ],
        testData: {}
      };
    },
    components: {
      chart
    },
    async mounted() {
      this.initTestData()
    },
    destroyed() {
  
    },
    methods: {
      getData() {

      },
      del(row) {
        console.log(row)
      },
      initTestData() {
        this.testData = {
          title: '任务成功率',
          values: [[1667736469,"0.07517290115356445"],[1667736484,"0.07517290115356445"],[1667736499,"0.0466618537902832"],[1667736514,"0.0466618537902832"],[1667736529,"0.047148704528808594"],[1667736544,"0.047148704528808594"],[1667736559,"0.04716157913208008"],[1667736574,"0.04712104797363281"],[1667736589,"0.04712104797363281"],[1667736604,"0.04716348648071289"],[1667736619,"0.04716348648071289"],[1667736634,"0.04720735549926758"],[1667736649,"0.04720735549926758"],[1667736664,"0.04720735549926758"],[1667736679,"0.04715776443481445"],[1667736694,"0.04715776443481445"],[1667736709,"0.04724740982055664"],[1667736724,"0.04724740982055664"],[1667736739,"0.04726600646972656"],[1667736754,"0.047206878662109375"],[1667736769,"0.047206878662109375"],[1667736784,"0.04714345932006836"],[1667736799,"0.04714345932006836"],[1667736814,"0.0472254753112793"],[1667736829,"0.0472254753112793"],[1667736844,"0.0472254753112793"],[1667736859,"0.04716682434082031"],[1667736874,"0.04722452163696289"],[1667736889,"0.04722452163696289"],[1667736904,"0.047266483306884766"],[1667736919,"0.047266483306884766"],[1667736934,"0.047266483306884766"],[1667736949,"0.04722929000854492"],[1667736964,"0.04722929000854492"],[1667736979,"0.04723930358886719"],[1667736994,"0.04723930358886719"],[1667737009,"0.02648305892944336"],[1667737024,"0.02648305892944336"],[1667737039,"0.026507854461669922"],[1667737054,"0.026514530181884766"],[1667737069,"0.026514530181884766"],[1667737084,"0.026413917541503906"],[1667737099,"0.026413917541503906"],[1667737114,"0.026413917541503906"],[1667737129,"0.02642679214477539"],[1667737144,"0.026447296142578125"],[1667737159,"0.026447296142578125"],[1667737174,"0.02645730972290039"],[1667737189,"0.02645730972290039"],[1667737204,"0.02645730972290039"],[1667737219,"0.026455402374267578"],[1667737234,"0.026455402374267578"],[1667737249,"0.026463031768798828"],[1667737264,"0.026463031768798828"],[1667737279,"0.026473045349121094"],[1667737294,"0.026473045349121094"],[1667737309,"0.02649974822998047"],[1667737324,"0.02649974822998047"],[1667737339,"0.026492595672607422"],[1667737354,"0.026492595672607422"],[1667737369,"0.02651834487915039"],[1667737384,"0.02651834487915039"],[1667737399,"0.026431560516357422"],[1667737414,"0.026437759399414062"],[1667737429,"0.026437759399414062"],[1667737444,"0.02643442153930664"],[1667737459,"0.02643442153930664"],[1667737474,"0.02643442153930664"],[1667737489,"0.02644634246826172"],[1667737504,"0.02644634246826172"],[1667737519,"0.026456832885742188"]].reverse()
        }
      }
    }
  }
  </script>
<style lang="less" scoped>
.plan{
  width: 114px;
  height: 10px;
  background: #C0C4CC;
  border-radius: 5px;
  .piston{
    height: 10px;
    background: #2E79F6;
    border-radius: 5px;
  }
}
.chart{
  display: flex;
  margin: 0 -8px;
  width: 100%;
  padding-top: 16px;
  .chart-item{
    background: #242730;
    border-radius: 10px;
    margin: 0 8px;
    height: 334px;
    flex: 1;
  }
}
</style>